<template>
    <div v-for="header in props.headers" :key="header.title">
        <ul>
        <li :key="header.id" class="relative rounded-md p-3 hover:bg-gray-100">
            <h1 class="text-sm font-medium leading-5 bg-blue-200">
                {{ header.title }}
            </h1>
            <ul>
                <li v-for="item in header.items" :key="item.name">
                    <div class="flex">
                        <div class="font-semibold mr-3">{{ item.name }}:</div>
                        <div class="max-w-200 break-all">{{ item.value }}</div>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
    </div>
    
</template>
<script setup>
const props = defineProps({
  headers: {
    type: Array,
    default: () => [],
  },
});
</script>